<template>
  <Frame :showTabBar="false">
    <template #main>
      <div
        style="
          margin: 0;
          margin-top: -10px;
          margin-left: -5px;
          padding: 0;
          display: flex;
          /* flex-wrap: wrap; */
        "
      >
        <Greetings />
        <UserCard />
      </div>
      <div
        style="
          margin: 0px;
          margin-left: -5px;
          padding: 0;
          display: flex;
          flex-wrap: wrap;
          height: 67vh;
        "
      >
        <CountCard title="注册用户数量" :count="userCount" />
        <CountCard title="本月注册用户数量" :count="newUserCount" />
        <CountCard title="未来总会议数" :count="futureMeetingCount" />
        <CountCard title="今日总会议数" :count="todayMeetingCount" />
        <LoginTrend />
        <SystemStability />
        <Todo />
      </div>
    </template>
  </Frame>
</template>

<script>
import { HomeFilled, UserFilled, Grid, Histogram,MuteNotification } from "@element-plus/icons-vue";
import { baseUrl } from "../main.js";
import { show_error_msg } from "../js/msg.js"
import axios from "axios";
import Frame from "../components/frame.vue";
import Greetings from "../components/home/greetings.vue";
import UserCard from "../components/home/userCard.vue";
import CountCard from "../components/home/countCard.vue";
import LoginTrend from "../components/home/loginTrend.vue";
import SystemStability from "../components/home/systemStability.vue";
import Todo from "../components/home/todo.vue";
export default {
  components: {
    HomeFilled,
    UserFilled,
    Grid,
    Histogram,
    Frame,
    Greetings,
    CountCard,
    LoginTrend,
    SystemStability,
    Todo,
    MuteNotification,
    UserCard,
  },
  data() {
    return {
      baseUrl: baseUrl,
      userCount: "loading...",
      newUserCount: "loading...",
      futureMeetingCount: "loading...",
      todayMeetingCount: "loading...",
    };
  },
  methods: {
    init() {
      this.get_user_count();
      this.get_new_user_count();
      this.get_futureMeetingCount();
      this.get_todayMeetingCount();
    },
    get_user_count() {
      axios.get(this.baseUrl + "/user/getUserCount").then((response) => {
        let re_data = response.data;
        if (re_data.status == 200) {
          this.userCount = re_data.data.count;
        }else{
          this.userCount = "ERROR";
          show_error_msg("读取用户数量失败", re_data.msg)
        }
      }).catch(error => {
          this.userCount = "ERROR";
          show_error_msg("读取用户数量失败", "网络异常")
      });
    },
    get_new_user_count() {
      axios.get(this.baseUrl + "/user/getUserCountByMount").then((response) => {
        let re_data = response.data;
        if (re_data.status == 200) {
          this.newUserCount = re_data.data.count;
        }else{
          this.newUserCount = "ERROR";
          show_error_msg("读取本月新用户数据失败", re_data.msg)
        }
      }).catch(error => {
          this.newUserCount = "ERROR";
          show_error_msg("读取用户数量失败", "网络异常")
      });
    },
    get_futureMeetingCount() {
      axios.get(this.baseUrl + "/Conference/getCountByFuture").then((response) => {
        let re_data = response.data;
        if (re_data.status == 200) {
          this.futureMeetingCount = re_data.data.count;
        } else {
          this.futureMeetingCount = "ERROR";
          show_error_msg("读取未来会议数量失败", re_data.msg)
        }
      }).catch(error => {
        this.futureMeetingCount = "ERROR";
        show_error_msg("读取未来会议数量失败", "网络异常")
      })
    },
    get_todayMeetingCount() {
      axios.get(this.baseUrl + "/Conference/getCountByToday").then((response) => {
        let re_data = response.data;
        if(re_data.status == 200) {
          this.todayMeetingCount = re_data.data.count;
        } else {
          this.todayMeetingCount = "ERROR";
          show_error_msg("读取今日会议数量失败", re_data.msg)
        }
      }).catch(error => {
        his.todayMeetingCount = "ERROR";
        show_error_msg("读取今日会议数量失败", "网络异常")
      })
    }
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
#home {
  height: 100%;
  padding: 0;
  margin: 0;
}

#aside {
  box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.2);
  z-index: 2020;
}

.el-footer {
  background-color: rgba(100, 181, 235, 0.336);
  color: #333;
  text-align: center;
  height: 3%;
  line-height: 30px;
}

.el-main {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 25px;
  padding-top: 30px;
  /* color: #333; */
  /* text-align: center; */
  /* line-height: 160px; */
}

.el-main > div > * {
  margin: 7px;
}
</style>